<!DOCTYPE html>
<#import "/spring.ftl" as spring />
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap-theme.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/css/mycss.css'/>">

    <title>TPO</title>
    <style>
        .search {
            width: 100%;
        }
        .search input {
            height: 45px;
            background-color: #f5f5f5;
            font-size: initial;
        }

        .avatar {
            width: 25px;
            height: 25px;
            border-radius: 5px;
            border:1px solid gainsboro;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">TPO Admin</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="<@spring.url '/admin/category/list'/>">分类</a></li>
                    <li><a href="<@spring.url '/admin/article/list'/>">文章</a></li>
                    <li class="active"><a href="javascript:void(0);">用户</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container-fluid">
        <table class="table table-inverse table-hover"
               id="dataTable"
               data-toggle="table"
               data-url="/tpo/admin/user/list/data"
               data-height="780"
               data-side-pagination="server"
               data-pagination="true"
               data-page-list="[5, 10, 20, 50, 100, 200]"
               data-page-size="20"
               data-search="true"
               data-sort-order="desc"
               data-sort-name="id">
        </table>
    </div>

    <script src="<@spring.url '/admin/js/jquery-3.2.1.min.js'/>"></script>
    <script src="<@spring.url '/admin/js/popper.min.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table-zh-CN.min.js'/>"></script>
<script>
    // 对Date的扩展，将 Date 转化为指定格式的String
    // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
    // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
    // 例子：
    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
    // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    var $table = $('#dataTable').bootstrapTable({
        //表格的列
        columns: [
            {
                field: 'id',//域值
                title: 'id',//内容
                visible: true,//false表示不显示
                sortable: true//启用排序
            },
            {
                field: 'openid',//域值
                title: 'openid',//内容
                visible: true,//false表示不显示
                sortable: true//启用排序
            },
            {
                field: 'nickname',//域值
                title: '昵称',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter : function (value, row, index) {
                    var nickname =  row["nicknameForBase64Decoder"];
                    var headimgurl =  row["headimgurl"];

                    var html = ' <img src="'+headimgurl+'" class="avatar" /> ';

                    var tdCodeUrl =  row["tdCodeUrl"];
                    if(tdCodeUrl!=null && tdCodeUrl!=""){
                        html += ' <img src="'+tdCodeUrl+'" class="avatar" /> '
                    }
                    html += nickname;
                    return html;
                }
            },
            {
                field: 'sex',//域值
                title: '性别',//内容 值为1时是男性，值为2时是女性，值为0时是未知
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var str_sex = "";
                    if(value ==1){
                        str_sex = '男';
                    }else if(value == 2){
                        str_sex = '女';
                    }else if(value == 0 ){
                        str_sex = '未知';
                    }
                    return '<span style="color:#000">'+str_sex+'</span>';
                }
            }
            , {
                field: 'province',//域值
                title: 'province',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            }, {
                field: 'city',//域值
                title: 'city',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            }, {
                field: 'country',//域值
                title: 'country',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            }, {
                field: 'area',//域值
                title: 'area',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            }, {
                field: 'phone',//域值
                title: 'phone',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            }, {
                field: 'language',//域值
                title: 'language',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            }, {
                field: 'createDate',//域值
                title: 'createDate',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var createDate = new Date(value).Format("yyyy-MM-dd hh:mm");
                    return '<span style="color:#000">'+createDate+'</span>';
                }
            }, {
                field: 'pay_money',//域值
                title: 'pay_money',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            }, {
                field: 'order_create_date',//域值
                title: 'order_create_date',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    if(value){
                        var order_create_date = new Date(value).Format("yyyy-MM-dd hh:mm");
                        return '<span style="color:#000">'+order_create_date+'</span>';
                    }else{
                        return '-';
                    }

                }
            }
        ]
    });

</script>
</body>
</html>